<template>
	<!-- 顶部 -->
	<nav-bar
		style="height: 3.125rem; padding-top: 0.9375rem"
		title="热门课程"
		left-text=""
		fixed="true"
		left-arrow
		@click-left="onClickLeft"
	>
	</nav-bar>
	<!-- 内容区域 -->
	<div class="cards">
		<card
			v-for="item in shangPin2"
			:key="item.id"
			:title="item.name"
			@click="clickDel(item.id)"
			:desc="'课时' + item.id + '习题' + (item.id + 7)"
			:thumb="dalImg(item.picture)"
		>
			<!-- 内容卡左侧 -->
			<template #tags>
				<tag plain type="danger" class="a"
					><i class="fa fa-heart-o"></i> 249449</tag
				>
			</template>
			<!-- 内容卡右侧 -->
			<template #footer>
				<span class="b">￥{{ item.price }}</span>
			</template>
		</card>
	</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Card, NavBar, Tab, Tabs } from "vant";
import "font-awesome/css/font-awesome.min.css";
import { dalImg } from "../Utils/tools";

// 引入接口
import { localComboAPI } from "../API/jiang";
import { get } from "../utils/request";
const shangPin = ref([]);
const shangPin2 = ref([]);
localComboAPI().then((res) => {
	shangPin.value = res.data[1];
	id.value = res.data[1].id;
	shangPin2.value = res.data[1].children;
	console.log(shangPin.value);
});
const id = ref([]);
const clickDel = (tid) => {
	router.push({
		name: "Home-Training",
		query: {
			id: 2,
			idTwo: tid,
		},
	});
};

const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};
</script>
<style scoped>
.cards {
	background-color: #f5f5f5ff;
	overflow: auto;
}
.cards .van-card:nth-child(1) {
	margin-top: 5.3125rem;
}
.cards .van-card {
	border-radius: 0.625rem;
	width: 90%;
	background-color: #fff;
	margin: 0.625rem auto;
	box-shadow: 0rem 0.1875rem 0.4375rem 0rem rgb(0 0 0 / 35%);
}

.hots {
	margin-top: 4.0625rem;
}
.hots .van-card__title {
	font-size: 1.125rem;
	display: block;
	height: 3.125rem;
	line-height: 1.875rem;
	font-weight: unset;
}
.a {
	position: absolute;
	bottom: 0;
}
.b {
	position: absolute;
	display: block;
	bottom: 0.4375rem;
	right: 0.9375rem;
	font-size: 1.125rem;
	color: orange;
}
</style>
